<template>
  <div style="background-color: white">
    <div class="probox">
       <router-link to="/index/order"><el-page-header @back="goBack" content="订单详情"> </el-page-header></router-link>
    </div>
    <el-divider></el-divider>
    <div>
      <div class="tag-group">
        <el-tag>订单号</el-tag><span class="tag-group__title">{{tableData.orderId}}</span>
      </div>
      <div class="tag-group">
        <el-tag>订单人</el-tag><span class="tag-group__title">{{tableData.recipient}}</span>
      </div>
      <div class="tag-group">
        <el-tag>创建时间</el-tag><span class="tag-group__title">{{this.$formatDate(tableData.create_time)}}</span>
      </div>
      <div class="tag-group">
        <el-tag>订单状态</el-tag><span class="tag-group__title">{{tableData.payStatus==1?"未支付":"已支付"}}</span>
      </div>
      <div class="tag-group">
        <el-tag>商品价格</el-tag><span class="tag-group__title">￥{{tableData.allPrice}}元</span>
      </div>
      <div class="tag-group">
        <el-tag>支付方式</el-tag><span class="tag-group__title">{{tableData.paymentMethod==1?"支付宝":"微信"}}</span>
      </div>
    </div>
    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
    <div class="probox">
      <el-table  border style="width: 100%">
        <el-table-column prop="name" label="商品名称" width="200px">
        </el-table-column>
        <el-table-column prop="images" label="商品图片" width="220px">
        </el-table-column>
        <el-table-column prop="info" label="商品信息" width="230px">
        </el-table-column>
        <el-table-column prop="price" label="单价" width="200px">
        </el-table-column>
        <el-table-column prop="count" label="数量" width="200px">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    goBack() {
      console.log("go back");
    },
  },
  computed: {
    tableData(){
      return this.$store.state.order.orderInfo
    }
  }
};
</script>
<style >
.tag-group {
  margin: 8px 0 8px 20px;
}
.tag-group .el-tag {
  height: 20px;
  line-height: 20px;
  margin-right: 15px;
}

</style>